<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-family: "隶书";
        }

        #container{
            margin: 0px auto;
            width: 407px;
            padding: 0px;
            position: relative;
        }
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            float: left;
        }

        ul li {
            margin: 5px 0px;
            float: left;
        }

        #news {
            border: solid 1px #ccc;
            width: 367px;
            padding: 8px 20px 30px 20px;
            float: left;
        }

        .title {
            float: left;
            width: 100%;
            border-bottom: solid 1px #ccc;
        }

        .title button {
            float: left;
            width: 90px;
            border: solid 0px red;
            padding: 8px;
            margin-right: 8px;
            font-size: 16px;
        }

        .title button:hover {
            float: left;
            width: 90px;
            border: solid 0px red;
            padding: 8px;
            margin-right: 8px;
            background-color: cornflowerblue;
            color: white;
        }

        .content {
            width: 357px;
            border: solid 0px red;
            margin-top: 20px;
            float: left;
            display:none;
        }

        .content span {
            float: left;
            font-size: 13px;
        }

        .content span:nth-child(1) {
            width: 32px;
            color: cornflowerblue;
        }

        .content span:nth-child(2) {
            width: 268px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content span:nth-child(3) {
            color: #ccc;
            width: 57px;
        }
        #content1{
            display: block;
        }

    </style>
    <script type="text/javascript">
    function Function1(){
        var block1 = document.getElementById('content1')
        var block2 = document.getElementById('content2')
        var block3 = document.getElementById('content3')
        block1.style.display='block'
        block2.style.display='none'
        block3.style.display='none'
    }
    function Function2(){
        var block1 = document.getElementById('content1')
        var block2 = document.getElementById('content2')
        var block3 = document.getElementById('content3')
        block2.style.display='block'
        block1.style.display='none'
        block3.style.display='none'
    }
    function Function3(){
        var block1 = document.getElementById('content1')
        var block2 = document.getElementById('content2')
        var block3 = document.getElementById('content3')
        block3.style.display='block'
        block2.style.display='none'
        block1.style.display='none'
    }

</script>
</head>
<body>
<div id="container">
    <div id="news">
        <div class="title">
            <button onclick="Function1()" onmousemove="Function1()">热点排行</button>
            <button onclick="Function2()" onmousemove="Function2()">评论排行</button>
            <button onclick="Function3()" onmousemove="Function3()">图片排行</button>
        </div>
        <div class="clearL1"></div>
        <div  id="content1" class="content">
            <ul>
                <li>
                    <span>01</span>
                    <span>任务部署比五年前翻一番！中纪委今年反腐要这么干</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>02</span>
                    <span>54.7亿理财涉嫌违规！工行13家分行收到千万级罚单</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>03</span>
                    <span>任务部署比五年前翻一番！中纪委今年反腐要这么干</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>04</span>
                    <span>54.7亿理财涉嫌违规！工行13家分行收到千万级罚单</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>05</span>
                    <span>任务部署比五年前翻一番！中纪委今年反腐要这么干</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>06</span>
                    <span>54.7亿理财涉嫌违规！工行13家分行收到千万级罚单</span>
                    <span>999999</span>
                </li>
            </ul>

        </div>
        <div id="content2" class="content">
            <ul>
                <li>
                    <span>01</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>02</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>03</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>04</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>05</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>06</span>
                    <span>评论事件，评论事件，评论事件，评论事件</span>
                    <span>999999</span>
                </li>
            </ul>

        </div>
        <div id="content3" class="content">
            <ul>
                <li>
                    <span>01</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>02</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>03</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>04</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>05</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
                <li>
                    <span>06</span>
                    <span>图片事件，图片事件，图片事件，图片事件</span>
                    <span>999999</span>
                </li>
            </ul>

        </div>
    </div>
</div>
</body>
</html>